<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getDueTo } from "@/api/apply";
import { RouterLink } from "vue-router";
import dayjs from "dayjs";
//表單數據格式
interface dataForm {
  docid: string;
  material_origina: string;
  material_replacea: string;
  material_product: string;
  applier: string;
  apply_date: string;
  current_flow: number;
  current_flow_phase: string;
  last_update_time: string;
  org_code: string;
  chinese_name:string;
}

const tableData = ref<dataForm[]>([]);

//獲取當前代辦
onMounted(() => {
  getDueTo().then((data: any) => {
    if (data[0].message === undefined) {
      data.forEach((item: dataForm) => {
        tableData.value.push(item);
      });
    }
  });
});

//日期格式
function formatter(date: string) {
  if (date) {
    return dayjs(date).format("YYYY-MM-DD");
  }
}
//成品料號過長摺疊
function collapseProduct(cellvalue:string){
  return cellvalue.length <= 16 ? cellvalue : cellvalue.substring(0,13)+"..."; 
}
//合併單元格
function rowspanMethod(data: any) {
  const fields = ["docid","chinese_name","current_flow_phase","apply_date","org_code"];
  const { $rowIndex, column, row, visibleData } = data;
  //獲取單元格的值
  const cellvalue = row["docid"];
  if (cellvalue && fields.includes(column.field)) {
    let prevRow = visibleData[$rowIndex - 1];
    let nextRow = visibleData[$rowIndex + 1];
    if (prevRow && prevRow["docid"] === cellvalue) {
      return { rowspan: 0, colspan: 0 };
    } else {
      let countRowspan = 1;
      while (nextRow && nextRow["docid"] === cellvalue) {
        nextRow = visibleData[++countRowspan + $rowIndex];
      }
      if (countRowspan > 1) {
        return { rowspan: countRowspan, colspan: 1 };
      }
    }
  }
}
</script>

<template>
  <main>
    <div class="due_to_box">
      <vxe-table
        :data="tableData"
        align="center"
        border
        height="600px"
        stripe
        resizeable
        :scroll-y="{ enabled: true}"
        :span-method="rowspanMethod"
      >
        <!-- <vxe-column type="seq" title="序號" width="60"></vxe-column> -->
        <vxe-column  class="grid" field="docid"  title="單號" width="160">
          <template v-slot="{ row }">
            <RouterLink class="link" :to="{path: `/materialSub/${row.current_flow === 10 ?'apply' :'approve'}`,query:{docidtmep:row.docid}}">{{row.docid}}</RouterLink>
          </template>
        </vxe-column>
        <vxe-column field="org_code" title="廠區"></vxe-column>
        <vxe-column field="material_origina" title="原料號"></vxe-column>
        <vxe-column field="material_replacea" title="替代料號"></vxe-column>
        <vxe-column field="material_product" title="成品號">
          <template v-slot="{row}">
            <el-popover title="成品料號" :width="200"  effect="dark" trigger="hover">
              <template #reference>
                <span>{{ collapseProduct(row.material_product) }}</span>
              </template>
              <span>{{ row.material_product }}</span>
            </el-popover>
          </template>
        </vxe-column>
        <vxe-column field="current_flow_phase" title="當前流程"></vxe-column>
        <vxe-column field="chinese_name" title="申請人" width="150"></vxe-column>
        <vxe-column field="apply_date" title="申請日期">
          <template v-slot="{ row }">
            <span>{{ formatter(row.apply_date) }}</span>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
  </main>
</template>
<style>
.due_to_box {
  color: black;
  width: 90%;
  margin: 20px auto;
  min-width: 800px;
}
.link {
  color: rgb(46, 109, 109);
  font-weight: bold;
  text-decoration: none;
}
.link:hover {
  color: rgb(208, 22, 22, 0.8);
}
.vxe-body--row td{
  vertical-align: middle;
}

.vxe-table--render-default.border--full {
  /* 表格最外层border颜色 */
  /* .vxe-table--border-line {
    box-shadow: 0 5px 0 5px rgba(39, 37, 37, 0.8);
  } */

   /* 表头单元格boder颜色，vxe-table是用background-image: linear-gradient来实现的 */
  /* 表内单元格高度、字体 */
  .vxe-body--column {
    /* height: 32px; */
    /* padding: 0px !important; */
    font-size: 16px;
    color: #373030;
  }
}

</style>
